import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import 'amfe-flexible'

// 导入自定义指令
import './directive'

// 全局导入 日期转换格式的方法，之后就不需要在页面单独导入了
// 日期显示为 多久之前
import { fromatTimeAgoFn } from './utils/date.js'

// 导入 ArticleItem 全局组件，并全局注册(任意vue文件中直接使用)
import ArticleItem from '@/components/ArticleItem.vue'

// 测试用检验token值
// import '@/api/home'

// 导入permission.js文件，让路由守卫生效
import './permission'

// 引入vant 组件库
import './plugins'

// import hljs from 'highlight.js' // hljs对象
import 'highlight.js/styles/default.css' // 代码高亮的样式

// 导入自定义组件
import Component from './plugins/component'
// 注册自定义插件 ：这步就会 调用 install 函数
Vue.use(Component)

// vant 组件库 代码分离
// import { Lazyload, DatetimePicker, Image, Tag, CellGroup, Divider, Search, Row, Col, Badge, Popup, Dialog, ActionSheet, PullRefresh, List, Button, NavBar, Form, Field, Tabbar, TabbarItem, Icon, Tab, Tabs, Cell, Toast } from 'vant'

// 全局注册 ArticleItem ArticleItem.name是组件名称，当标签名用
Vue.component(ArticleItem.name, ArticleItem)

// 把公共函数加入到vue原型上，原理就是：每个vue文件都是继承自vue的实例
// 可以直接访问vue原型上的一切属性和方法  本质就是原型链的查找机制
Vue.prototype.fromatTimeAgoFn = fromatTimeAgoFn

// Vue.use(Lazyload) // v-lazy指令
// Vue.use(Toast)
// Vue.use(NavBar)
// Vue.use(Button)
// Vue.use(Form)
// Vue.use(Field)
// Vue.use(Tabbar)
// Vue.use(TabbarItem)
// Vue.use(Icon)
// Vue.use(Tab)
// Vue.use(Tabs)
// Vue.use(Cell)
// Vue.use(List)
// Vue.use(PullRefresh)
// // 动作面板
// Vue.use(ActionSheet)
// Vue.use(Dialog)
// Vue.use(Popup)
// Vue.use(Badge)
// Vue.use(Row)
// Vue.use(Col)
// Vue.use(Search)
// Vue.use(Divider)
// Vue.use(CellGroup)
// Vue.use(Tag)
// Vue.use(Image)
// // Vue.use(Popup)
// Vue.use(DatetimePicker)

// 注册一个全局自定义指令 'v-focus'
// Vue.directive('focus', {
//   inserted: function (el) {
//     el.focus()
//     console.log(el)
//   }
// })

// 导入

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
